<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :width="width"
      append-to-body
      :before-close="handleClose"
    >
      <el-row type="flex" justify="space-between">
        <span>Current: {{!current ? '' : current.name}}</span>
        <el-button type="primary" size="small" @click="openAddDialog">Add Children</el-button>
      </el-row>
      <expand-table :data="tableData" @row-click="handleRowClick"/>
      <el-row style="margin-top:20px">
        <el-row type="flex" justify="end" style="margin-top:50px">
          <el-button size="small" @click="handleCancel">Cancel</el-button>
          <el-button type="primary" size="small" @click="handleConfirm">Confirm</el-button>
        </el-row>
      </el-row>
    </el-dialog>
    <add-children :visible.sync="addVisible" :current="current" :source="source" :data="originData" @children-data="handleGetChildren"/>
  </div>
</template>
<script>
import AddChildren from './sunburst-add-children'
export default {
  props:{
    visible:{
      type:Boolean,
      default:false
    },
    width:{
      type:String,
      default:'60%'
    },
    title:{
      type:String,
      default:'Children'
    },
    setting:{
      type:Object,
      default:() => {
        return {}
      }
    },
    source:{
      type:Array,
      default:() => {
        return []
      }
    }
  },
  components:{
    ExpandTable:() => import('./expand-table'),
    AddChildren
  },
  watch:{
    visible:{
      handler:function(val){
        if(!val) this.current = false
      }
    }
  },
  data(){
    return {
      tableData:[],
      gadgetData:[],
      current:null,
      addVisible:false,
      originData:[]
    }
  },
  computed:{
    dataSourceColumns(){
      return this.$parent.dataSourceColumns
    }
  },
  created(){
    this.$root.eventBus.$on('sunburst-data',(data) => {
      this.tableData = (this.setting.resultData && this.setting.resultData.length > 0 ? this.setting.resultData : this.formatDataToEchart(data))
      this.originData = data;
    })
  },
  methods:{
    formatDataToEchart (data) {
      const X = this.setting.dimension
      const Y = this.setting.measure
      let formatData = []
      data.filter(v => v[X] !== null || v[Y] !== null).forEach(item => {
        const obj = {
          name:item[X],
          value:item[Y],
          dimension:X,
          measure:Y,
          childrenData:data.filter(v => v[X] === item[X])
        }
        const Index = formatData.findIndex((v) => {
          return v.name === obj.name
        })
        if(Index < 0){
          formatData.push(obj)
        }else{
          formatData[Index].value += parseFloat(obj.value)
        }

        
      })
      return formatData
    },
    handleRowClick(row,column,event){
      this.current = row
      // this.currentIndex = 
    },
    handleClose(done){
      this.$emit('update:visible',false)
      done()
    },
    openAddDialog(){
      if(this.current === null) {
        this.$message.error('Please select a data item.')
      }else{
        this.addVisible = true
      }
    },
    handleGetChildren(children){
      this.$set(this.current,'children',children)
    },
    handleCancel(){
      this.$emit('update:visible',false)
    },
    handleConfirm(){
      this.$emit('result',this.tableData)
      this.handleCancel()
    }
  },
  destroyed(){
    this.$root.eventBus.$off('sunburst-data')
  }
}
</script>